<!-- // eslint-disable-next-line -->
<!-- /* eslint-disable */ -->
<template>
	<div class="info">
		<Left
			@left="left"
		></Left>
		<UserName 
		ref = "username"
		:username="username"
		></UserName>
		<div class="infocell">
			<div class="infobox" v-for="(info,index) in infos" :key="index">
				<img v-lazy="info.img" :height="height" :width="width">
				<div class="box">
					<span class="infotext">{{info.text}} {{info.info}}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
// eslint-disable-next-line
/* eslint-disable */
import UserName from "../components/username.vue"
import Left from "../components/left.vue"
import { MessageBox } from "mint-ui"
export default {
	components: {
		UserName,
		Left
	},
	data() {
		return {
			username: !localStorage.getItem('username')?"Ken":localStorage.getItem("username"),
			height: 70,
			width: 70,
			infos: [
				// {
				// 	img: 'http://placebeard.it/83/84/notag',
				// 	text: '记账日期',
				// 	info: '2018-07-19'
				// }
			]
		}
	},
	created() {
		this.info();
	},
	methods: {
		left() {
			this.$router.go(-1)
		},
		info() {
			api.info({
				user_id: localStorage.getItem("userid"),
				token: localStorage.getItem("token"),
				id: this.$route.params.id,
				user_name: localStorage.getItem('username'),
				user_img: localStorage.getItem("userimg"),
			}).then(res=>{
				if(res.code===0){
					// this.infos = res.data;
					this.infos = this.handleInfo(res)
				}
			}).catch(err=>{
				if(err.code===1008){
					MessageBox("",err.message)
				}
			})
		},
		handleInfo(res){
			var arr = [];
			for(var key in res.data){
				switch (key) {
					case "date":
						arr.push({
							img: localStorage.getItem("userimg"),
							text: "记账日期",
							info: res.data["date"]
						})
						break;
					case "morning":
						arr.push({
							img: localStorage.getItem("userimg"),
							text: "早餐花费",
							info: res.data["morning"]
						})
						break;
					case "afternoon":
						arr.push({
							img: localStorage.getItem("userimg"),
							text: "午餐花费",
							info: res.data["afternoon"]
						})
						break;
					case "evening":
						arr.push({
							img: localStorage.getItem("userimg"),
							text: "晚餐花费",
							info: res.data["evening"]
						})
						break;
					case "other":
						arr.push({
							img: localStorage.getItem("userimg"),
							text: "其他花费",
							info: res.data["other"]
						})
						break;
					default:
						// statements_def
						break;
				}
			}
			return arr;
		}
	}
}
</script>

<style scoped lang="scss">
.infocell{
	position: relative;
	background-color: #666;
	.infobox{
		padding: 25px 20px 25px 20px;
		color: #fff;
	}
	img{
		vertical-align: middle;
	}
	.box{
		display: inline-block;
	    width: 70%;
	    overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		.infotext{
			display: inline-block;
			height: 100%;
		}
		.infotext::before{
			display: inline-block;
			vertical-align: middle;
			margin-top: -5px;
			content:'';
			width:0;
			height:0;
	    	border-width:5px;
	    	border-style:solid;
	    	border-color:transparent #fff transparent transparent; /* transparent 设置边框颜色透明 */
		}
	}
	p{
		padding: 5px;
		text-align: center;
		color: #fff;
	}
}	
</style>